<meta charset="UTF-8">
<div id="querydev">
    <div class="full">
        <h3 class="h3-title">{{$t("bgMgr.queryDev")}}</h3>
        <ul>
            <li>
                <i-input v-model.trim="queryParameter"></i-input>
            </li>
            <li>
                <i-button type="primary" @click="handlerClickQuery">{{$t("reportForm.query")}}</i-button>
            </li>
            <li style="float:right;width:auto;">
                <i-button @click="exportDevice">导出当前设备</i-button>
            </li>
            <li style="float:right;width:auto;">
                <i-button @click="expireNotifyTime(180)">已过期</i-button>
            </li>
            <li style="float:right;width:auto;">
                <i-button @click="expireNotifyTime(30)">一个月内过期</i-button>
            </li>

            <li style="float:right;width:auto;">
                <i-button @click="expireNotifyTime(7)">7天内过期</i-button>
            </li>
        </ul>

        <div class="table-wraper">
            <i-table border ref="table" :columns="columns" :data="tableData" :height="taleHeight" :loading="loading"></i-table>
        </div>
        <div class="my-page" style="margin: 5px 0;">
            <Page :total="total" :page-size="10" :current="currentIndex" @on-change="changePage"></Page>
        </div>

        <Modal v-model="ownerInfoModal" width="500">
            <p slot="header" style="color:#f60;text-align:center">
                <Icon type="ios-create-outline"></Icon>
                <span>编辑保单信息</span>
            </p>
            <div style="text-align:center">
                <Row style="margin:10px 0;">
                    <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">设备序号 : &nbsp;</i-col>
                    <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                        {{ownerInfoData.deviceid}}
                    </i-col>
                </Row>
                <Row style="margin:10px 0;">
                    <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">车主名称 : &nbsp;</i-col>
                    <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                        <i-input v-model.trim="ownerInfoData.ownername" style="width: 100%;"></i-input>
                    </i-col>
                </Row>
                <Row style="margin:10px 0;">
                    <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">联系方式1 : &nbsp;</i-col>
                    <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                        <i-input v-model.trim="ownerInfoData.phonenum1" style="width: 100%;"></i-input>
                    </i-col>
                </Row>
                <Row style="margin:10px 0;">
                    <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">联系方式2 : &nbsp;</i-col>
                    <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                        <i-input v-model.trim="ownerInfoData.phonenum2" style="width: 100%;"></i-input>
                    </i-col>
                </Row>
                <Row style="margin:10px 0;">
                    <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">身份证号 : &nbsp;</i-col>
                    <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                        <i-input v-model.trim="ownerInfoData.idnum" style="width: 100%;"></i-input>
                    </i-col>
                </Row>
                <Row style="margin:10px 0;">
                    <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">性别 : &nbsp;</i-col>
                    <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                        <i-select v-model="ownerInfoData.gender">
                            <i-option value="1">男</i-option>
                            <i-option value="0">女</i-option>
                        </i-select>
                    </i-col>
                </Row>
                <Row style="margin:10px 0;">
                    <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">地址 : &nbsp;</i-col>
                    <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                        <i-input v-model.trim="ownerInfoData.address" style="width: 100%;"></i-input>
                    </i-col>
                </Row>
                <Row style="margin:10px 0;">
                    <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">备注 : &nbsp;</i-col>
                    <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                        <i-input v-model.trim="ownerInfoData.ownerremark" style="width: 100%;"></i-input>
                    </i-col>
                </Row>
            </div>
            <div slot="footer">
                <i-button type="primary" style="width: 100%" @click="handleEditDeviceex">提交</i-button>
            </div>
        </Modal>

        <Modal v-model="insureInfoModal" width="500">
            <p slot="header" style="color:#f60;text-align:center">
                <Icon type="ios-create-outline"></Icon>
                <span>保险信息</span>
            </p>
            <div style="text-align:center">
                <Row style="margin:10px 0;">
                    <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">设备序号 : &nbsp;</i-col>
                    <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                        {{insureInfoData.deviceid}}
                    </i-col>
                </Row>
                <Row style="margin:10px 0;">
                    <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">防盗号 : &nbsp;</i-col>
                    <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                        <i-input v-model.trim="insureInfoData.securitynum" style="width: 100%;"></i-input>
                    </i-col>
                </Row>
                <Row style="margin:10px 0;">
                    <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">车架号 : &nbsp;</i-col>
                    <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                        <i-input v-model.trim="insureInfoData.vin" style="width: 100%;"></i-input>
                    </i-col>
                </Row>
                <Row style="margin:10px 0;">
                    <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">保险公司 : &nbsp;</i-col>
                    <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                        <i-input v-model.trim="insureInfoData.insurecompany" style="width: 100%;"></i-input>
                    </i-col>
                </Row>
                <Row style="margin:10px 0;">
                    <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">保单号 : &nbsp;</i-col>
                    <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                        <i-input v-model.trim="insureInfoData.insurenum" style="width: 100%;"></i-input>
                    </i-col>
                </Row>
                <Row style="margin:10px 0;">
                    <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">投保日期 : &nbsp;</i-col>
                    <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                        <i-input v-model.trim="insureInfoData.subinsuretime" style="width: 100%;"></i-input>
                    </i-col>
                </Row>
                <Row style="margin:10px 0;">
                    <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">生效日期 : &nbsp;</i-col>
                    <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                        <i-input v-model.trim="insureInfoData.effecttime" style="width: 100%;"></i-input>
                    </i-col>
                </Row>
                <Row style="margin:10px 0;">
                    <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">保险备注 : &nbsp;</i-col>
                    <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                        <i-input v-model.trim="insureInfoData.insuremark" style="width: 100%;"></i-input>
                    </i-col>
                </Row>
            </div>
            <div slot="footer">
                <i-button type="primary" style="width: 100%" @click="handleEditInsure">提交</i-button>
            </div>
        </Modal>

        <Modal v-model="modal" width="900" title="编辑设备">
            <div style="width:700px;margin:10px auto">
                <Row style="margin: 10px 0" v-if="userType < 3">
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;"><i style="color: red;display: inline-block;">*</i>&nbsp;选择账号 : &nbsp;</i-col>
                    <i-col span="8">
                        <div class="search-wrapper">
                            <i-input v-model.trim="createrToUser" :icon="iconState" @on-change="sosoValueChange" @on-blur="blur" @on-focus="focus" @on-click="focus"></i-input>
                            <transition name="fade">
                                <ul class="search-item-wrapper" v-show="isShowMatchDev" style="cursor: pointer;">
                                    <li v-for="item in userlists" style="padding:5px 10px;" @click="selectedCmd(item)" :class="{'ivu-select-item-focus':item == createrToUser}">
                                        <div :value="item" :key="item">
                                            <span style="cursor: pointer;">{{ item }}</span>
                                        </div>
                                    </li>
                                </ul>
                            </transition>
                        </div>
                    </i-col>
                </Row>
                <Row style="margin: 10px 0">
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t("user.grouping")}} : &nbsp;</i-col>
                    <i-col span="8">
                        <i-select v-model.sync="groupid">
                            <i-option v-for="item in groupsList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
                        </i-select>
                    </i-col>
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">SIM : &nbsp;</i-col>
                    <i-col span="8">
                        <i-input v-model.trim.number="simnum"></i-input>
                    </i-col>
                </Row>
                <Row style="margin: 10px 0">
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;"><i style="color: red;display: inline-block;">*</i>&nbsp;{{$t("alarm.overdueTime")}} : &nbsp;</i-col>
                    <i-col span="8">
                        <date-picker type="date" v-model="expirenotifytime" :disabled="disabledOverdueTime"></date-picker>
                    </i-col>

                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">&nbsp;{{$t("alarm.devName")}} : &nbsp;</i-col>
                    <i-col span="8">
                        <i-input v-model.trim="devicename"></i-input>
                    </i-col>

                </Row>

                <Row style="margin: 10px 0">
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;"><i style="color: red;display: inline-block;">*</i>&nbsp;{{$t("user.devType")}} : &nbsp;</i-col>
                    <i-col span="8">
                        <!-- devicetype -->
                        <i-select v-model="devicetype" :disabled="isEditDeviceType">
                            <i-option v-for="item in deviceTypeList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
                        </i-select>
                    </i-col>
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t("alarm.devNum")}} : &nbsp;</i-col>
                    <i-col span="8">
                        <i-input v-model.trim="deviceid" disabled></i-input>
                    </i-col>

                </Row>

                <Row style="margin: 10px 0">
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">&nbsp;网络类型 : &nbsp;</i-col>
                    <i-col span="8">
                        <i-select v-model="teltype">
                            <i-option value="1">2G</i-option>
                            <i-option value="2">3G</i-option>
                            <i-option value="3">4G</i-option>
                        </i-select>
                    </i-col>
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">&nbsp;转发地址 : &nbsp;</i-col>
                    <i-col span="8">
                        <i-input v-model.trim="forwardurl"></i-input>
                    </i-col>
                </Row>

                <Row style="margin: 10px 0">
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t("device.reportCount")}} : &nbsp;</i-col>
                    <i-col span="8">
                        <i-input v-model.trim="reportedpoint"></i-input>
                    </i-col>
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t("device.allReportCount")}} : &nbsp;</i-col>
                    <i-col span="8">
                        <i-input v-model.trim="totalpoint"></i-input>
                    </i-col>
                </Row>

                <Row style="margin: 10px 0">
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t("device.isUse")}} : &nbsp;</i-col>
                    <i-col span="8">
                        <i-select v-model="deviceenable">
                            <i-option value="0">{{$t("user.ban")}}</i-option>
                            <i-option value="1">{{$t("user.allow")}}</i-option>
                        </i-select>
                    </i-col>
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">&nbsp;监护账号 : &nbsp;</i-col>
                    <i-col span="8">
                        <i-input v-model.trim="monitor"></i-input>
                    </i-col>
                </Row>


                <Row style="margin: 10px 0">
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">&nbsp;下级编辑 : &nbsp;</i-col>
                    <i-col span="8">
                        <i-select v-model="allowedit" :disabled="isAlloweditDisabled">
                            <i-option value="0">{{$t("user.ban")}}</i-option>
                            <i-option value="1">{{$t("user.allow")}}</i-option>
                        </i-select>
                    </i-col>
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t("device.allowLogin")}} : &nbsp;</i-col>
                    <i-col span="8">
                        <i-select v-model="loginenable">
                            <i-option value="0">{{$t("user.ban")}}</i-option>
                            <i-option value="1">{{$t("user.allow")}}</i-option>
                        </i-select>
                    </i-col>
                </Row>

                <Row style="margin: 10px 0">
                    <i-col span="6" :offset="7">
                        <i-button style="width: 100%" @click="handleSubmit">{{$t("bgMgr.submit")}}</i-button>
                    </i-col>
                    <i-col span="6" :offset="1">
                        <i-button style="width: 100%" @click="resetInfo">{{$t("bgMgr.reset")}}</i-button>
                    </i-col>
                </Row>
            </div>
            <div slot="footer" style="height:20px;"></div>
        </Modal>
    </div>
    <script>
        vueInstanse = new Vue({
            el: "#querydev",
            i18n: utils.getI18n(),
            data: {
                taleHeight: 300,
                isQuery: false,
                userType: Cookies.get('userType'),
                modal: false,
                queryParameter: "",
                loading: true,
                total: 0,
                currentIndex: 1,
                teltype: '1',
                columns: [{
                        title: vRoot.$t("alarm.devName"),
                        key: 'devicenamekey',
                    }, {
                        title: vRoot.$t("alarm.devNum"),
                        key: 'deviceidkey'
                    }, {
                        title: vRoot.$t("user.devType"),
                        key: 'devtype'
                    }, {
                        title: vRoot.$t("monitor.phoneNumber"),
                        key: 'simnumkey'
                    }, {
                        width: 100,
                        title: vRoot.$t("bgMgr.bindpwd"),
                        key: 'bindpwd',
                    },

                    {
                        title: vRoot.$t("bgMgr.addTime"),
                        key: 'createtimestr'
                    }, {
                        title: vRoot.$t("monitor.expireTime"),
                        key: 'expirenotifytimestr'
                    }, {
                        title: vRoot.$t("bgMgr.creater"),
                        key: 'creater',
                    }, {
                        title: vRoot.$t("user.grouping"),
                        key: 'groupname'
                    }, {
                        title: vRoot.$t("bgMgr.action"),
                        key: 'action',
                        width: 340,
                        render: function(h, params) {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: function() {
                                            // vueInstanse.editDevice(params.row);
                                            vueInstanse.editDeviceIndex = params.index;
                                            editObject = params.row;
                                            vueInstanse.groupid = editObject.groupid;
                                            vueInstanse.createrToUser = editObject.creater;
                                            vueInstanse.setDeviceData();
                                            vueInstanse.modal = true;
                                        }
                                    }
                                }, vRoot.$t("bgMgr.edit")),
                                h('Poptip', {
                                    props: {
                                        confirm: true,
                                        title: vRoot.$t("message.confirmDel")
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        'on-ok': function() {
                                            vueInstanse.handleDelete(params.row.deviceid);
                                        }
                                    }
                                }, [
                                    h('Button', {
                                        props: {
                                            type: 'error',
                                            size: 'small',
                                            disabled: Cookies.get('userType') !== '0'

                                        }
                                    }, vRoot.$t("bgMgr.delete"))
                                ]),
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: function() {
                                            utils.queryDeviceex(params.row.deviceid, function(resp) {
                                                vueInstanse.ownerInfoData.deviceid = params.row.deviceid;
                                                if (resp) {
                                                    vueInstanse.ownerInfoData.ownername = resp.ownername;
                                                    vueInstanse.ownerInfoData.phonenum1 = resp.phonenum1;
                                                    vueInstanse.ownerInfoData.phonenum2 = resp.phonenum2;
                                                    vueInstanse.ownerInfoData.idnum = resp.idnum;
                                                    vueInstanse.ownerInfoData.gender = String(resp.gender);
                                                    vueInstanse.ownerInfoData.ownerremark = resp.remark;
                                                    vueInstanse.ownerInfoData.address = resp.address;
                                                } else {
                                                    vueInstanse.ownerInfoData.ownername = '';
                                                    vueInstanse.ownerInfoData.phonenum1 = '';
                                                    vueInstanse.ownerInfoData.phonenum2 = '';
                                                    vueInstanse.ownerInfoData.idnum = '';
                                                    vueInstanse.ownerInfoData.gender = '';
                                                    vueInstanse.ownerInfoData.ownerremark = '';
                                                    vueInstanse.ownerInfoData.address = '';
                                                }
                                                vueInstanse.ownerInfoModal = true;
                                            });
                                        }
                                    }
                                }, '车主信息'),
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: function() {
                                            utils.queryDeviceex(params.row.deviceid, function(resp) {
                                                console.log('resp', resp)
                                                vueInstanse.insureInfoData.deviceid = params.row.deviceid;
                                                if (resp) {
                                                    vueInstanse.insureInfoData.securitynum = resp.securitynum;
                                                    vueInstanse.insureInfoData.vin = resp.vin;
                                                    vueInstanse.insureInfoData.insurecompany = resp.insurecompany;
                                                    vueInstanse.insureInfoData.insurenum = resp.insurenum;
                                                    vueInstanse.insureInfoData.subinsuretime = resp.subinsuretime;
                                                    vueInstanse.insureInfoData.effecttime = resp.effecttime;
                                                    vueInstanse.insureInfoData.insuremark = resp.insuremark;
                                                } else {
                                                    vueInstanse.insureInfoData.securitynum = '';
                                                    vueInstanse.insureInfoData.vin = '';
                                                    vueInstanse.insureInfoData.insurecompany = '';
                                                    vueInstanse.insureInfoData.insurenum = '';
                                                    vueInstanse.insureInfoData.subinsuretime = '';
                                                    vueInstanse.insureInfoData.effecttime = '';
                                                    vueInstanse.insureInfoData.insuremark = '';
                                                }
                                                vueInstanse.insureInfoModal = true;
                                            });
                                        }
                                    }
                                }, '保险信息'),
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: function() {
                                            vueInstanse.resetDevicePwd(params.index);
                                        }
                                    }
                                }, vRoot.$t("user.resetPwd")),
                            ]);
                        }
                    }
                ],
                editDeviceIndex: null,
                queryTableData: [],
                tableData: [],
                recordsList: [],
                groupsList: [],

                iconState: "ios-arrow-down",
                deviceid: "",
                devicename: "",
                devicetype: "",
                simnum: "",
                expirenotifytime: "",
                loginenable: "1",
                deviceenable: "0",
                deviceTypeList: [],
                reportedpoint: 0,
                totalpoint: 1500,
                groupid: '',
                companyid: '',
                forwardurl: "",
                allowedit: '0',
                createrToUser: "",
                userlists: [],
                isShowMatchDev: false,
                monitor: "",
                ownerInfoModal: false,
                ownerInfoData: { //编辑的设备信息
                    deviceid: '',
                    ownername: '',
                    phonenum1: '',
                    phonenum2: '',
                    idnum: '',
                    gender: '0',
                    ownerremark: '',
                    address: ''
                },
                insureInfoModal: false,
                insureInfoData: { //编辑的设备信息
                    deviceid: '',
                    securitynum: '', //防盗号
                    vin: '', //车架号
                    insurecompany: '', //保险公司
                    insurenum: '', //保单号
                    subinsuretime: '', //投保日期
                    effecttime: '', //生效日期
                    insuremark: '', //保险备注
                },
            },
            methods: {
                handleEditInsure: function() {
                    var me = this;
                    utils.editDeviceex('insure', me.ownerInfoData, function(resp) {
                        console.log(resp);
                        if (resp.status === 0) {
                            me.$Message.success("编辑成功");
                            me.ownerInfoModal = false;
                        } else {
                            me.$Message.error("编辑失败");
                        }
                    });
                },
                handleEditDeviceex: function() {
                    var me = this;
                    utils.editDeviceex('owner', me.ownerInfoData, function(resp) {
                        console.log(resp);
                        if (resp.status === 0) {
                            me.$Message.success("编辑成功");
                            me.ownerInfoModal = false;
                        } else {
                            me.$Message.error("编辑失败");
                        }
                    });
                },
                handlerClickQuery() {
                    var self = this;
                    var queryTableData = [];
                    var queryParameterLowerCase = this.queryParameter.toLowerCase();
                    if (!self.queryParameter) {
                        return;
                    };
                    this.isQuery = true;
                    this.recordsList.forEach(function(record) {
                        var deviceid = record.deviceid;
                        var devicename = record.devicename;
                        var monitor = record.monitor;
                        var creater = record.creater;
                        if (
                            creater.indexOf(self.queryParameter) != -1 ||
                            devicename.indexOf(self.queryParameter) != -1 ||
                            deviceid.indexOf(self.queryParameter) != -1 ||
                            record.pinYin.indexOf(queryParameterLowerCase) != -1 ||
                            record.firstLetter.indexOf(queryParameterLowerCase) != -1 ||
                            (record.forwardurl && record.forwardurl.indexOf(queryParameterLowerCase) != -1) ||
                            (monitor && (monitor.indexOf(self.queryParameter) != -1))
                        ) {
                            queryTableData.push(record);
                        }
                    });

                    this.currentIndex = 1;
                    this.queryTableData = queryTableData;
                    this.tableData = this.queryTableData.slice(0, 10);
                    this.total = this.queryTableData.length;

                },
                expireNotifyTime: function(dayNumber) {
                    this.isQuery = true;
                    var queryTableData = [];

                    this.recordsList.forEach(function(record) {
                        if (record.expirenotifytime > 0) {
                            var time = record.expirenotifytime - Date.now();
                            var days = parseInt(time / (1000 * 60 * 60 * 24));
                            if (dayNumber == 180) {
                                if (days < 0) {
                                    queryTableData.push(record);
                                }
                            } else {
                                if (days >= 0) {
                                    if (days <= dayNumber) {
                                        queryTableData.push(record);
                                    }
                                }
                            }
                        }
                    });

                    this.currentIndex = 1;
                    this.queryTableData = queryTableData;
                    this.tableData = this.queryTableData.slice(0, 10);
                    this.total = this.queryTableData.length;
                },
                getDevType: function(row) {

                    var devType = "";
                    vstore.state.deviceTypes.forEach(function(item) {
                        var label = item.typename;
                        if (item.remark) {
                            label += "(" + item.remark + ")";
                        }
                        if (item.devicetypeid == row.devicetype) {
                            devType = label;
                        }
                    })
                    return devType;

                },
                filterDataInfo: function(devList) {
                    var me = this;
                    var data = [];
                    devList.forEach(function(dev) {
                        dev.devtype = me.getDevType(dev);
                        dev.deviceidkey = "\t" + dev.deviceid;
                        dev.devicenamekey = "\t" + dev.devicename;
                        dev.simnum ? (dev.simnumkey = "\t" + dev.simnum) : (dev.simnumkey = "");
                        dev.bindpwd = dev.bindpwd != null ? dev.bindpwd : '';
                        dev.createtimestr = DateFormat.longToDateTimeStr(dev.createtime, timeDifference);
                        dev.expirenotifytimestr = DateFormat.longToDateTimeStr(dev.expirenotifytime, timeDifference);
                        dev.groupname = me.getGroupName(dev.groupid);
                        dev.pinYin = __pinyin.getPinyin(dev.devicename);
                        dev.firstLetter = __pinyin.getFirstLetter(dev.devicename);
                        data.push(dev);
                    });
                    return data;
                },
                resetDevicePwd: function(index) {
                    var me = this;
                    var deviceid = this.tableData[index].deviceid;
                    var url = myUrls.resetDeviceLoginPwd();
                    utils.sendAjax(url, {
                        deviceid: deviceid
                    }, function(resp) {
                        if (resp.status === 0) {
                            me.$Message.success((isZh ? "密码重置为:" : "Password reset to :") + resp.newpass);
                        } else {
                            me.$Message.error(isZh ? "密码重置失败" : "Password Reset Failed");
                        }
                    });
                },
                getGroupName: function(groupId) {
                    var groupName = "";
                    if (this.allGroups[groupId] !== undefined) {
                        groupName = this.allGroups[groupId].groupname;
                    }
                    return groupName;
                },
                getDeviceList: function() {
                    var me = this;
                    var url = myUrls.queryDeviceListWithGroupInfo();
                    utils.sendAjax(url, {}, function(resp) {
                        me.loading = false;
                        if (resp.status == 0 && resp.devices != null) {
                            resp.groups.forEach(function(item) {
                                me.allGroups[item.groupid] = item;
                            });
                            me.recordsList = me.filterDataInfo(resp.devices);
                            me.tableData = me.recordsList.slice(0, 10);
                            me.total = me.recordsList.length;

                        } else {
                            me.$Message.error(resp.cause);
                        }
                    });
                },
                handleDelete: function(deviceid) {
                    var me = this;
                    var url = myUrls.deleteDevice();
                    var data = {
                        deviceid: deviceid
                    };
                    utils.sendAjax(url, data, function(resp) {
                        if (resp.status == 0) {
                            rootuser = null;
                            isNeedRefresh = true;
                            if (deviceid == globalDeviceId) {
                                globalDeviceId = "";
                                vRoot.$store.commit('currentDeviceId', "");
                            }

                            me.$Message.success(me.$t("message.deleteSucc"));


                            me.tableData.forEach(function(itme, index) {
                                if (itme.deviceid == deviceid) {
                                    me.$delete(me.tableData, index);
                                }
                            });


                            me.recordsList.forEach(function(itme, index) {
                                if (itme.deviceid == deviceid) {
                                    me.$delete(me.recordsList, index);
                                }
                            });

                            // me.total = me.recordsList.length;
                            // me.tableData = me.recordsList.slice(me.currentIndex - 1, 10);
                        } else {
                            me.$Message.error(me.$t("message.deleteFail"));
                        }
                        me.modal = false;

                    });
                },
                exportDevice: function() {
                    if (this.queryParameter == "") {
                        if (this.tableData.length) {
                            this.$refs.table.exportCsv({
                                filename: 'deviceids',
                                columns: this.columns.filter(function(col, index) {
                                    return index < 8
                                }),
                                data: this.recordsList,
                                quoted: true,
                            });
                        }
                    } else {
                        if (this.queryTableData.length) {
                            this.$refs.table.exportCsv({
                                filename: 'deviceids',
                                columns: this.columns.filter(function(col, index) {
                                    return index < 8
                                }),
                                data: this.queryTableData,
                                quoted: true,
                            });
                        }
                    }
                },

                handleSubmit: function() {
                    var me = this;
                    var url = myUrls.editDevice();
                    if (this.expirenotifytime == "") {
                        me.$Message.error(me.$t("message.plSelectTime"));
                        return;
                    }

                    var data = {
                        deviceid: this.deviceid,
                        devicetype: this.devicetype,
                        expirenotifytime: new Date(this.expirenotifytime).getTime(),
                        loginenable: Number(this.loginenable),
                        deviceenable: Number(this.deviceenable),
                        allowedit: Number(this.allowedit)
                    };

                    if (this.devicename) {
                        data.devicename = this.devicename;
                    };
                    if (this.teltype) {
                        data.teltype = Number(this.teltype);
                    };


                    if (this.simnum !== "") {
                        data.simnum = this.simnum;
                    };
                    if (this.groupid !== "" && this.groupsList.length) {
                        data.groupid = this.groupid;
                    } else {
                        data.groupid = 0;
                    };

                    if (this.reportedpoint == 0 || this.reportedpoint && !isNaN(this.reportedpoint)) {
                        data.reportedpoint = Number(this.reportedpoint);
                    }

                    if (this.totalpoint && !isNaN(this.totalpoint)) {
                        data.totalpoint = Number(this.totalpoint);
                    }

                    data.monitor = this.monitor;

                    this.forwardurl && (data.forwardurl = this.forwardurl);

                    if (userlists.indexOf(this.createrToUser) == -1) {
                        me.$Message.error(me.$t("message.selectCorrectAccount"));
                        return;
                    }

                    if (this.userType < 3) {
                        data.creater = this.createrToUser;
                    } else {
                        data.creater = userName;
                    }

                    utils.sendAjax(url, data, function(resp) {
                        if (resp.status == 0) {
                            editObject.teltype = String(data.teltype);
                            var newData = Object.assign(editObject, data);
                            newData.expirenotifytimestr = DateFormat.longToDateTimeStr(data.expirenotifytime, timeDifference);
                            me.tableData[me.editDeviceIndex] = newData;
                            utils.changeSingleItemData(me.recordsList, newData, 'deviceid');
                            isNeedRefresh = true;
                            me.$Message.success(me.$t("message.changeSucc"));
                        } else if (resp.status = -1) {
                            if (resp.cause !== null && resp.cause.indexOf("token") != -1) {
                                window.location.href = "index.html";
                            } else {
                                me.$Message.error(me.$t("message.changeFail"));
                            }
                        }
                    });
                },
                resetInfo: function() {
                    this.devicename = "";
                    this.devicetype = "";
                    this.simnum = "";
                    this.expirenotifytime = "";
                    this.loginenable = "0";
                    this.deviceenable = "0";
                    this.groupsList = [];
                    this.groupid = "";
                    this.reportedpoint = 0;
                    this.totalpoint = 1500;
                    this.forwardurl = "";
                    this.monitor = "";
                },
                setDeviceData: function() {
                    var me = this;
                    me.deviceid = editObject.deviceid;
                    me.simnum = editObject.simnum;
                    me.expirenotifytime = editObject.expirenotifytimestr;
                    me.devicename = editObject.devicename;
                    me.devicetype = editObject.devicetype;
                    me.loginenable = editObject.loginenable + "";
                    me.deviceenable = "" + editObject.deviceenable;
                    me.reportedpoint = editObject.reportedpoint;
                    me.totalpoint = editObject.totalpoint;
                    me.forwardurl = editObject.forwardurl;
                    // me.createrToUser = editObject.creater;
                    me.monitor = editObject.monitor;
                    me.teltype = String(editObject.teltype);
                    me.allowedit = String(editObject.allowedit);
                },
                getDeviceType: function() {
                    var me = this;
                    vstore.state.deviceTypes.forEach(function(item) {
                        var label = item.typename;
                        if (item.remark) {
                            label += "(" + item.remark + ")";
                        }
                        me.deviceTypeList.push({
                            value: item.devicetypeid,
                            label: label
                        });
                    })
                },
                selectedCmd: function(item) {
                    var me = this;
                    setTimeout(function() {
                        me.isShowMatchDev = false;
                        me.createrToUser = item;
                    }, 100)
                },
                sosoValueChange: function() {
                    var me = this;
                    var value = this.createrToUser.toLowerCase();

                    if (this.timeoutIns != null) {
                        clearTimeout(this.timeoutIns);
                    }

                    if (!value.trim()) {
                        this.userlists = userlists;
                        return;
                    }

                    this.timeoutIns = setTimeout(function() {
                        me.filterMethod(value);
                    }, 100);
                },
                focus: function() {
                    this.isShowMatchDev = true;
                },
                blur: function() {
                    var me = this
                    setTimeout(function() {
                        me.isShowMatchDev = false;
                    }, 300)
                },
                filterMethod: function(value) {
                    var list = [];
                    userlists.forEach(function(itme) {
                        if (itme.toLowerCase().indexOf(value) != -1) {
                            list.push(itme);
                        }
                    })
                    this.userlists = list;
                },
                queryGroupsByUserName: function(userName) {
                    me = this;
                    groupsList = [];

                    // utils.sendAjax(url,data,function(resp){
                    //     var groupsList = [];
                    //     if(resp.status === 0 && resp.grouplist){
                    //         resp.grouplist.forEach(function (group) { 
                    //             groupsList.push({label:group.groupname,value:group.groupid});
                    //         })
                    //     }
                    //     me.groupsList = groupsList;
                    // });
                    var groupid = editObject.groupid;
                    var foundGroupId = false;
                    for (var key in me.allGroups) {
                        var item = me.allGroups[key];
                        if (item.creater == userName) {
                            groupsList.push({
                                label: item.groupname,
                                value: item.groupid
                            });
                            if (item.groupid == groupid) {
                                foundGroupId = true;
                            }
                        }
                    }

                    me.groupsList = groupsList;
                    me.groupid = editObject.groupid;
                    if (foundGroupId) {
                        vueInstanse.groupid = editObject.groupid;
                    } else {
                        vueInstanse.groupid = 0;
                    }


                },
                calcTableHeight: function() {
                    var wHeight = window.innerHeight;
                    this.taleHeight = wHeight - 184;
                },
            },
            watch: {
                isShowMatchDev: function() {
                    if (!this.isShowMatchDev) {
                        this.iconState = "ios-arrow-down";
                    } else {
                        this.iconState = "ios-arrow-up";
                    }
                },
                createrToUser: function(newVal) {
                    if (userlists.indexOf(newVal) != -1) {
                        this.queryGroupsByUserName(newVal);
                    } else {
                        this.groupsList = [];
                        this.groupid = 0;
                    }
                }
            },
            computed: {
                isEditDeviceType: function() {
                    return this.userType > 0;
                },
                disabledOverdueTime: function() {
                    return this.userType > 3;
                },
                isAlloweditDisabled: function() {
                    return !(Number(this.userType) <= 1);
                }
            },
            mixins: [mixIn],
            mounted: function() {
                var me = this;
                this.userlists = userlists;
                this.userType = vstore.state.userType;
                this.allGroups = {};
                this.getDeviceList();
                this.getDeviceType();
                this.calcTableHeight();
                window.onresize = function() {
                    me.calcTableHeight();
                }
            }
        })
    </script>
</div>